<template>
	<div class="app-container">
    <el-form :inline="true" :model="dataForm" @submit.native.prevent @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input placeholder="品名" v-model="dataForm.productName" :clearable="true" size="mini">
          <template slot="prepend">品名</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input placeholder="物料编码" v-model="dataForm.batchNum" :clearable="true" size="mini">
          <template slot="prepend">物料编码</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-select v-model="dataForm.status" clearable placeholder="全部状态" size="mini">
          <el-option label="未完成" value="1" />
          <el-option label="已完成" value="2" />
      	</el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" class="pan-btn primary-btn" @click="searchData()" icon="el-icon-search" size="mini">搜索</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="success" class="pan-btn success-btn" v-if="isAuth('check:performance:send')" @click="send()" icon="el-icon-s-promotion" size="mini">发起</el-button>
      </el-form-item>
    </el-form>

    <el-table
    	:data="dataList"
    	v-loading="dataListLoading"
      ref="dataTable"
    	border
      fit
      highlight-current-row
      style="width: 100%">
      <el-table-column
        prop="performanceId"
        header-align="center"
        align="center"
        label="编号"
        width="80">
      </el-table-column>
      <el-table-column
      	prop="itemStatus"
      	header-align="center"
      	align="center"
      	label="状态"
        width="80">
        <template slot-scope="{row}">
          <el-tag :type="row.itemStatus == 1 ? 'danger' : 'success'" size="small">
            {{ row.itemStatus == 1 ? '未完成' : '已完成' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="workshopName"
        header-align="center"
        align="center"
        label="生产车间">
      </el-table-column>
      <el-table-column
        prop="productName"
        header-align="center"
        align="center"
        label="品名">
      </el-table-column>
      <el-table-column
        prop="productGmp"
        header-align="center"
        align="center"
        label="GMP编码">
      </el-table-column>
      <el-table-column
        prop="batchNum"
        header-align="center"
        align="center"
        label="物料编码">
      </el-table-column>
      <el-table-column
        prop="inspectionItemName"
        header-align="center"
        align="center"
        label="检验项目">
      </el-table-column>
      <el-table-column
        prop="inspectionUserName"
        header-align="center"
        align="center"
        label="检验人">
      </el-table-column>
      <el-table-column
        prop="testTime"
        header-align="center"
        align="center"
        label="检验时间">
        <template slot-scope="{row}">
          {{ row.startTime | changeTime }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="操作"
        width="160">
        <template slot-scope="scope">
          <template v-if="userInfo.username == 'admin' ? true : userInfo.inspectionGroupIds == null ? false : userInfo.inspectionGroupIds.indexOf(scope.row.inspectionGroupId) > -1">
            <el-button type="success" class="pan-btn success-btn" size="mini" v-if="scope.row.itemStatus == 1" @click="write(scope.row)">填写</el-button>
            <el-button type="danger" class="pan-btn danger-btn" size="mini" v-if="scope.row.itemStatus == 2" @click="write(scope.row)">修改</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <send v-if="sendVisible" @refreshData="getDataList" @close="close('sendVisible')" />

    <write v-if="writeVisible" @refreshData="getDataList" :childDataForm="childDataForm" @close="close('writeVisible')" />

	</div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import CommonMethod from '@/views/mixin/common'
  import { CODE_OK } from '@/common/js/config'
  import { getPerformanceList } from '@/api/check'
  import { isBlank } from '@/common/js/utils'
  import Send from './send'
  import Write from './write'
	export default {
    name: 'jixiao',
    filters: {
      procedureNameFilter(name) {
        if (!isBlank(name)) {
          return name.replace(',',' ')
        }
        return null
      }
    },
    mixins: [CommonMethod],
    components: {
      Send,Write
    },
		data(){
      return{
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataForm: {},
        childDataForm: '',
        sendVisible: false,
        writeVisible: false
      }
		},
    mounted() {
      this.getInfo()
    },
    computed: {
      ...mapGetters([
         'userInfo'
      ])
    },
		methods:{
      write(row) {
        this.childDataForm = {
          productName: row.productName,
          batchNum: row.batchNum,
          inspectionGroupId: row.inspectionGroupId,
          sendTime: row.sendTime
        }
        this.writeVisible = true
      },
      send() {
        this.sendVisible = true
      },
      getInfo() {
        this.getDataList()
      },
      getDataList() {
      	this.dataListLoading = true
        const params = {
          page: this.pageIndex,
          limit: this.pageSize,
          inspectionGroupIds: this.userInfo.inspectionGroupIds,
          status: this.dataForm.status || null,
          productName: this.dataForm.productName || null,
          batchNum: this.dataForm.batchNum || null
        }
        getPerformanceList(params).then(res => {
        	if (res.code === CODE_OK) {
        		this.dataList = res.page.list
        		this.totalPage = res.page.totalCount
        	}else{
        		this.$message.error(res.msg)
        	}
        	this.dataListLoading = false
        }).catch()
      },
      searchData() {
      	this.pageIndex=1
      	this.getDataList()
      },
      close(val) {
        this.childDataForm = ''
        this[val] = !this[val]
      }
		}
	}
</script>

<style scoped>
  >>> .el-form-item__content {
    line-height: normal;
  }
</style>
